<template>
  <div class="content">
    <h1 id="javascript-规范">JavaScript 规范</h1>
    <h2 id="缩进">缩进</h2>
    <p>使用 soft tab（2 个空格）。</p><pre class="language-js"><code><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>
  y <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="单行长度">单行长度</h2>
    <p>不要超过 200，但如果编辑器开启 word wrap 可以不考虑单行长度。</p>
    <h2 id="分号">分号</h2>
    <p>以下几种情况后需加分号：</p>
    <ul>
      <li>变量声明</li>
      <li>表达式</li>
      <li>return</li>
      <li>throw</li>
      <li>break</li>
      <li>continue</li>
      <li>do-while</li>
    </ul><pre class="language-js"><code><span class="token comment">/* let declaration */</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token comment">/* expression statement */</span>
x<span class="token operator">++</span><span class="token punctuation">;</span>

<span class="token comment">/* do-while */</span>
<span class="token keyword">do</span> <span class="token punctuation">{</span>
  x<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">while</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="空格">空格</h2>
    <p>以下几种情况不需要空格：</p>
    <ul>
      <li>对象的属性名后</li>
      <li>前缀一元运算符后</li>
      <li>后缀一元运算符前</li>
      <li>函数调用括号前</li>
      <li>无论是函数声明还是函数表达式，'('前不要空格</li>
      <li>数组的'['后和']'前</li>
      <li>对象的'{'后和'}'前</li>
      <li>运算符'('后和')'前</li>
    </ul>
    <p>以下几种情况需要空格：</p>
    <ul>
      <li>二元运算符前后</li>
      <li>三元运算符'?:'前后</li>
      <li>代码块'{'前</li>
      <li>下列关键字前：<code>else</code>, <code>while</code>, <code>catch</code>, <code>finally</code></li>
      <li>下列关键字后：<code>if</code>, <code>else</code>, <code>for</code>, <code>while</code>, <code>do</code>, <code>switch</code>, <code>case</code>, <code>try</code>, <code>catch</code>, <code>finally</code>, <code>with</code>, <code>return</code>, <code>typeof</code></li>
      <li>单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后</li>
      <li>对象的属性值前</li>
      <li>for 循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格</li>
      <li>无论是函数声明还是函数表达式，'{'前一定要有空格</li>
      <li>函数的参数之间</li>
    </ul><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  b<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  b<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token operator">++</span>x<span class="token punctuation">;</span>
y<span class="token operator">++</span><span class="token punctuation">;</span>
z <span class="token operator">=</span> x <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token operator">++</span>x<span class="token punctuation">;</span>
y<span class="token operator">++</span><span class="token punctuation">;</span>
z <span class="token operator">=</span> x <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">;</span>

<span class="token comment">// no space before '(', one space before '{', one space between function parameters</span>
<span class="token keyword">let</span> <span class="token function-variable function">doSomething</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// no space before '('</span>
<span class="token function">doSomething</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">6</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  x<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">6</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  x<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="空行">空行</h2>
    <p>以下几种情况需要空行：</p>
    <ul>
      <li>变量声明后（当变量声明在代码块的最后一行时，则无需空行）</li>
      <li>注释前（当注释在代码块的第一行时，则无需空行）</li>
      <li>代码块后（在函数调用、数组、对象中则无需空行）</li>
      <li>文件最后保留一个空行</li>
    </ul><pre class="language-js"><code><span class="token comment">// need blank line after letiable declaration</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token comment">// not need blank line when letiable declaration is last expression in the current block</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&gt;=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token comment">// need blank line before line comment</span>
a<span class="token operator">++</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// not need blank line when comment is first line of block</span>
  <span class="token keyword">return</span> a<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// need blank line after blocks</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">2</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">continue</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  foo<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  bar<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// not need blank line when in argument list, array, object</span>
<span class="token function">func</span><span class="token punctuation">(</span>
  <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    a<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token number">3</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    a<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token number">3</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  b<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    a<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  c<span class="token punctuation">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="换行">换行</h2>
    <p>换行的地方，行末必须有','或者运算符；</p>
    <p>以下几种情况不需要换行：</p>
    <ul>
      <li>下列关键字后：<code>else</code>, <code>catch</code>, <code>finally</code></li>
      <li>代码块'{'前</li>
    </ul>
    <p>以下几种情况需要换行：</p>
    <ul>
      <li>代码块'{'后和'}'前</li>
      <li>变量赋值后</li>
    </ul><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
    b<span class="token punctuation">:</span> <span class="token number">1</span>
    <span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

x <span class="token operator">=</span> y
    <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  b<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  c<span class="token punctuation">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

x <span class="token operator">=</span> y <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>
x <span class="token operator">=</span> y <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token comment">// no need line break with 'else', 'catch', 'finally'</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>

<span class="token keyword">try</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> a<span class="token punctuation">,</span> foo <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">,</span> b<span class="token punctuation">,</span>
    c<span class="token punctuation">,</span> bar <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a<span class="token punctuation">,</span>
    foo <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">,</span>
    b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> bar <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="单行注释">单行注释</h2>
    <p>双斜线后，必须跟一个空格；</p>
    <p>缩进与下一行代码保持一致；</p>
    <p>可位于一个代码行的末尾，与代码间隔一个空格。</p><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// if you made it here, then all security checks passed</span>
  <span class="token function">allowed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> zhangsan <span class="token operator">=</span> <span class="token string">"zhangsan"</span><span class="token punctuation">;</span> <span class="token comment">// one space after code</span>
</code></pre>
    <h2 id="多行注释">多行注释</h2>
    <p>最少三行, '*'后跟一个空格，具体参照右边的写法；</p>
    <p>建议在以下情况下使用：</p>
    <ul>
      <li>难于理解的代码段</li>
      <li>可能存在错误的代码段</li>
      <li>浏览器特殊的 HACK 代码</li>
      <li>业务逻辑强相关的代码</li>
    </ul><pre class="language-js"><code><span class="token comment">/*
 * one space after '*'
 */</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="文档注释">文档注释</h2>
    <p>各类标签@param, @method 等请参考<a href="http://usejsdoc.org/" target="_blank" rel="noopener noreferrer">usejsdoc</a>和<a href="http://yuri4ever.github.io/jsdoc/" target="_blank" rel="noopener noreferrer">JSDoc Guide</a>；</p>
    <p>建议在以下情况下使用：</p>
    <ul>
      <li>所有常量</li>
      <li>所有函数</li>
      <li>所有类</li>
    </ul><pre class="language-js"><code><span class="token comment">/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值&lt;/br&gt;1—表示x&lt;/br&gt;2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> g<span class="token punctuation">,</span> j<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="引号">引号</h2>
    <p>最外层统一使用单引号。</p><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token string">"test"</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
  z <span class="token operator">=</span> <span class="token string">'&lt;div id="test"&gt;&lt;/div&gt;'</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="变量命名"> 变量命名</h2>
    <ul>
      <li>标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到 cgi 返回的数据）</li>
      <li>'ID'在变量名中全大写</li>
      <li>'URL'在变量名中全大写</li>
      <li>'Android'在变量名中大写第一个字母</li>
      <li>'iOS'在变量名中小写第一个，大写后两个字母</li>
      <li>常量全大写，用下划线连接</li>
      <li>构造函数，大写第一个字母</li>
      <li>jquery 对象必须以'$'开头命名</li>
    </ul><pre class="language-js"><code><span class="token keyword">let</span> thisIsMyName<span class="token punctuation">;</span>

<span class="token keyword">let</span> goodID<span class="token punctuation">;</span>

<span class="token keyword">let</span> reportURL<span class="token punctuation">;</span>

<span class="token keyword">let</span> AndroidVersion<span class="token punctuation">;</span>

<span class="token keyword">let</span> iOSVersion<span class="token punctuation">;</span>

<span class="token keyword">let</span> <span class="token constant">MAX_COUNT</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> body <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> $body <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="变量声明">变量声明</h2>
    <p>一个函数作用域中所有的变量声明尽量提到函数首部，用一个 let 声明，不允许出现两个连续的 let 声明。</p><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">doSomethingWithItems</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// use one let</span>
  <span class="token keyword">let</span> value <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">,</span>
    result <span class="token operator">=</span> value <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">,</span>
    i<span class="token punctuation">,</span>
    len<span class="token punctuation">;</span>

  <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    result <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="函数">函数</h2>
    <p>无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格；</p>
    <p>函数调用括号前不需要空格；</p>
    <p>立即执行函数外必须包一层括号；</p>
    <p>不要给 inline function 命名；</p>
    <p>参数之间用', '分隔，注意逗号后有一个空格。</p><pre class="language-js"><code><span class="token comment">// no space before '(', but one space before'{'</span>
<span class="token keyword">let</span> <span class="token function-variable function">doSomething</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">doSomething</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token function">doSomething</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token function">doSomething</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// requires parentheses around immediately invoked function expressions</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">x</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// use ', ' between function parameters</span>
<span class="token keyword">let</span> <span class="token function-variable function">doSomething</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// do something</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="数组、对象">数组、对象</h2>
    <p>对象属性名不需要加引号；</p>
    <p>对象以缩进的形式书写，不要写在一行；</p>
    <p>数组、对象最后不要有逗号。</p><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  b<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span> b<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  b<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  c<span class="token punctuation">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  b<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  c<span class="token punctuation">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="括号">括号</h2>
    <p>下列关键字后必须有大括号（即使代码块的内容只有一行）：<code>if</code>, <code>else</code>, <code>for</code>, <code>while</code>, <code>do</code>, <code>switch</code>, <code>try</code>, <code>catch</code>, <code>finally</code>, <code>with</code>。</p><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="null">null</h2>
    <p>适用场景：</p>
    <ul>
      <li>初始化一个将来可能被赋值为对象的变量</li>
      <li>与已经初始化的变量做比较</li>
      <li>作为一个参数为对象的函数的调用传参</li>
      <li>作为一个返回对象的函数的返回值</li>
    </ul>
    <p>不适用场景：</p>
    <ul>
      <li>不要用 null 来判断函数调用时有无传参</li>
      <li>不要与未初始化的变量做比较</li>
    </ul><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>b <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// not mean b is not supply</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> a<span class="token punctuation">;</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="undefined">undefined</h2>
    <p>永远不要直接使用 undefined 进行变量判断；</p>
    <p>使用 typeof 和字符串'undefined'对变量进行判断。</p><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>person <span class="token operator">===</span> undefined<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> person <span class="token operator">===</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre>
    <h2 id="jshint">jshint</h2>
    <p>用'===', '!=='代替'==', '!='；</p>
    <p>for-in 里一定要有 hasOwnProperty 的判断；</p>
    <p>不要在内置对象的原型上添加方法，如 Array, Date；</p>
    <p>不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；</p>
    <p>变量不要先使用后声明；</p>
    <p>不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；</p>
    <p>不要在同个作用域下声明同名变量；</p>
    <p>不要在一些不需要的地方加括号，例：delete(a.b)；</p>
    <p>不要使用未声明的变量（全局变量需要加到.jshintrc 文件的 globals 属性里面）；</p>
    <p>不要声明了变量却不使用；</p>
    <p>不要在应该做比较的地方做赋值；</p>
    <p>debugger 不要出现在提交的代码里；</p>
    <p>数组中不要存在空元素；</p>
    <p>不要在循环内部声明函数；</p>
    <p>不要像这样使用构造函数，例：new function () { ... }, new Object；</p><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  a<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  a<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>key <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// be sure that obj[key] belongs to the object and was not inherited</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">count</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token number">4</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">delete</span> obj<span class="token punctuation">.</span>attr<span class="token punctuation">;</span>

<span class="token comment">// good</span>
<span class="token keyword">delete</span> obj<span class="token punctuation">.</span>attr<span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  a<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    nums<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> i <span class="token operator">+</span> j<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good</span>
<span class="token keyword">let</span> singleton <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> privatelet<span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">publicMethod</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    privatelet <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">publicMethod2</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    privatelet <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
    <h2 id="杂项">杂项</h2>
    <p>不要混用 tab 和 space；</p>
    <p>不要在一处使用多个 tab 或 space；</p>
    <p>换行符统一用'LF'；</p>
    <p>对上下文 this 的引用只能使用'_this', 'that', 'self'其中一个来命名；</p>
    <p>行尾不要有空白字符；</p>
    <p>switch 的 falling through 和 no default 的情况一定要有注释特别说明；</p>
    <p>不允许有空的代码块。</p><pre class="language-js"><code><span class="token comment">// not good</span>
<span class="token keyword">let</span> a  <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// not good</span>
  <span class="token keyword">let</span> me <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>

  <span class="token comment">// good</span>
  <span class="token keyword">let</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>

  <span class="token comment">// good</span>
  <span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>

  <span class="token comment">// good</span>
  <span class="token keyword">let</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">case</span> <span class="token number">1</span><span class="token punctuation">:</span>
  <span class="token keyword">case</span> <span class="token number">2</span><span class="token punctuation">:</span>
    <span class="token operator">...</span>
    <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token keyword">case</span> <span class="token number">3</span><span class="token punctuation">:</span>
    <span class="token operator">...</span>
  <span class="token comment">// why fall through</span>
  <span class="token keyword">case</span> <span class="token number">4</span>
    <span class="token operator">...</span>
    <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token comment">// why no default</span>
<span class="token punctuation">}</span>

<span class="token comment">// not good with empty block</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>

<span class="token punctuation">}</span>
</code></pre></div>
</template>
